<template>
    <pageTabelLayout>
        <template #pageTabel>
            <a-form ref="formRef" layout="inline" style="margin-top:30px" size="small" :model="dataForm">
                <a-form-item style="width:350px" label-col-flex="100px" label="流转卡号" field="flowCardCode"
                    :rules="[{ required: true, message: '流转卡号必填' }]" :validate-trigger="['change', 'blur']">
                    <a-select popup-container="html"  class="bacClass" v-model="dataForm.flowCardCode" @focus="focusSel4" @search="handleSearch4"
                        @change="cardChange" :loading4="loading4" allow-clear allow-search>
                        <a-option v-for="item in pageData.cardList" :value="item.flowCardCode">
                            {{ item.flowCardCode }}
                        </a-option>
                    </a-select>
                </a-form-item>
                <a-form-item style="width:350px" label-col-flex="100px" label="布号" field="greyCode"
                    :rules="[{ required: true, message: '布号必填' }]" :validate-trigger="['change', 'blur']">
                    <a-select popup-container="html"  disabled class="bacClass" v-model="dataForm.greyCode" @focus="ccFocus" @click="ccClick"
                        allow-clear>
                        <a-option v-for="item in pageData.ccList" :value="item.greyCode">
                            {{ item.greyCode }}
                        </a-option>
                    </a-select>
                </a-form-item>
                <a-form-item style="width:350px" label-col-flex="100px" label="重量" field="flowCardWeight"
                    :rules="[{ required: true, message: '重量必填' }]" :validate-trigger="['change', 'blur']">
                    <a-select popup-container="html"  disabled class="bacClass" v-model="dataForm.flowCardWeight" @focus="ccFocus" @click="ccClick"
                        allow-clear>
                        <a-option v-for="item in pageData.ccList" :value="item.flowCardWeight">
                            {{ item.flowCardWeight }}
                        </a-option>
                    </a-select>
                </a-form-item>
                <a-form-item style="width:350px" label-col-flex="100px" label="程序号" field="programNumber"
                    :rules="[{ required: true, message: '程序号必填' }]" :validate-trigger="['change', 'blur']">
                    <a-select popup-container="html"  class="bacClass" v-model="dataForm.programNumber" @focus="focusSel3" @search="handleSearch3"
                        :loading3="loading3" allow-clear>
                        <a-option v-for="item in pageData.numList" :value="item.programNumber">
                            {{ item.programNumber }}
                        </a-option>
                    </a-select>
                </a-form-item>
                <a-form-item style="width:350px" label-col-flex="100px" label="设备编号" field="controlMachineCode"
                    :rules="[{ required: true, message: '设备编号必填' }]" :validate-trigger="['change', 'blur']">
                    <a-select popup-container="html"  class="bacClass" v-model="dataForm.controlMachineCode" @focus="focusSel1"
                        @search="handleSearch1" :loading1="loading1" allow-clear>
                        <a-option v-for="item in pageData.CodeList" :value="item.controlMachineCode">
                            {{ item.controlMachineCode }}
                        </a-option>
                    </a-select>
                </a-form-item>
                <!-- <a-col :span="6">
                                    <a-form-item label="吸水率">
                                        <a-select popup-container="html"  class="bacClass" v-model="dataForm.suckwaterRate" @focus="focusSel2"
                                            @search="handleSearch2" :loading2="loading2" allow-clear>
                                            <a-option v-for="item in pageData.waterList" :value="item.suckwaterRate">
                                                {{ item.suckwaterRate }}
                                            </a-option>
                                        </a-select>
                                    </a-form-item>
                                </a-col> -->
                <a-form-item style="width:350px" label-col-flex="100px" label="浴比">
                    <a-input class="bacClass" disabled v-model="dataForm.yb" />
                    <a-button type="primary" @click="ybClick">计算浴比</a-button>
                </a-form-item>
            </a-form>
        </template>
    </pageTabelLayout>
</template>

<script lang="ts">
import { post } from '@/api/http'
import { useTable, useRowKey, useTableColumn, usePagination, useRowSelection } from '@/hooks/table';
import emitter from "@/hooks/useEventBus";
import { ref, reactive, onMounted, toRefs } from 'vue'
import Toolbar from '@/components/Toolbar.vue';
import { Form, Message, Modal } from '@arco-design/web-vue';
import { FormInstance } from '@arco-design/web-vue/es/form';
import { baseURL } from '../../../../api/axios.config'
import axios from "axios";
import filedownload from 'js-file-download'
import usePermission from '@/store/modules/permission'
import PageTabelLayout from '@/components/pageTabelLayout.vue';
import { AnyARecord } from 'dns';


interface BrandInfo {
    "serial": any,
    "controlMachineCode": any,
    "controlMachineName": any,
    "qrCode": any,
    "suckwaterRate": any,
    "programNumber": any,
    "flowCardCode": any,
    "greyCode": any,
    "flowCardWeight": any,
    "yb": any,
}

export default {
    name: "RepeatBathRatio",
    setup() {
        const headerShow = ref<boolean>(true)
        const { selectedRowKeys, onSelectionChange } = useRowSelection();
        const table = useTable();
        const rowKey = useRowKey("id");


        const pageData = reactive<{
            nameList: [],
            pageLoading: boolean,
            typeList: [],
            dropDownData1: any,
            rHeight: any,
            btnList: any[],
            isEdit: boolean,
            CodeList: any[],
            NameList: any[],
            waterList: any[],
            numList: any[],
            cardList: any[],
            ccList: any[],
            greyList: any[],
        }>({
            greyList: [],
            nameList: [],
            pageLoading: false,
            typeList: [],
            dropDownData1: "",
            rHeight: 0,
            btnList: [],
            isEdit: false,
            CodeList: [],
            NameList: [],
            waterList: [],
            numList: [],
            cardList: [],
            ccList: [],
        });

        interface gcType {
            id: any,
            company: any,
        }
        //下拉框得到焦点
        const focusSel = () => {
            selCxAll({ "controlMachineCode": "", deleteState: 0 });
        }

        //下拉数据
        const options = ref<any>(pageData.nameList);
        const loading = ref(false);
        const handleSearch = (value: any) => {
            if (value) {
                const ob = { controlMachineCode: value, deleteState: 0 }
                loading.value = true;
                selCxAll(ob);
                options.value = pageData.nameList;
                loading.value = false;
            } else {
                options.value = []
            }
        };
        //下拉框查询
        function selCxAll(val: any) {
            post({
                url: "/pdm/CreateQrcode/getFieldValue",
                data: val
            }).then(({ data, code }: any) => {
                if (code === 200) {
                    console.log(data);
                    let dataList: any = [];
                    data.forEach(function (o: any) {
                        dataList.push(o["controlMachineCode"])
                    });
                    pageData.nameList = dataList;
                } else {
                    Message.error({
                        content: "查询失败！",
                        duration: 5000,
                    });
                }
            });
        }

        onMounted(() => {

        });

        const queryData = reactive({
            controlMachineCode: ""
        });

        const dataForm = reactive<BrandInfo>({
            "serial": 0,
            "controlMachineCode": null,
            "controlMachineName": "",
            "qrCode": "",
            "suckwaterRate": "",
            "programNumber": "",
            "flowCardCode": "",
            "greyCode": "",
            "flowCardWeight": "",
            "yb": "",
        })

        //下拉框   设备编号
        const focusSel1 = () => {
            selCxAll1({ "field": "controlMachineCode", deleteState: 0 });
        }
        const options1 = ref<any>(pageData.CodeList);
        const loading1 = ref(false);
        const handleSearch1 = (value: any) => {
            if (value) {
                const ob = { controlMachineCode: value, deleteState: 0 }
                loading1.value = true;
                selCxAll1(ob);
                options1.value = pageData.CodeList;
                loading1.value = false;
            } else {
                options1.value = []
            }
        };
        function selCxAll1(val: any) {
            post({
                url: "/pdm/controlMachine/getFieldValue",
                data: val
            }).then(({ data, code }: any) => {
                if (code === 200) {
                    pageData.CodeList = data;
                } else {
                }
            });
        }


        //下拉框  布种吸水率基础资料中的布种
        const focusSel2 = () => {
            selCxAll2({ "clothCode": "" });
        }
        const options2 = ref<any>(pageData.greyList);
        const loading2 = ref(false);
        const handleSearch2 = (value: any) => {
            if (value) {
                const ob = { clothCode: value }
                loading2.value = true;
                selCxAll2(ob);
                options2.value = pageData.greyList;
                loading2.value = false;
            } else {
                options2.value = []
            }
        };
        function selCxAll2(val: any) {
            post({
                url: "/pdm/ClothSuckwater/getFieldValue",
                data: val
            }).then(({ data, code }: any) => {
                if (code === 200) {
                    pageData.greyList = data;
                } else {
                }
            });
        }


        //下拉框   程序号
        const focusSel3 = () => {
            selCxAll3({ "programNumber": "", deleteState: 0 });
        }
        const options3 = ref<any>(pageData.numList);
        const loading3 = ref(false);
        const handleSearch3 = (value: any) => {
            if (value) {
                const ob = { programNumber: value, deleteState: 0 }
                loading3.value = true;
                selCxAll3(ob);
                options3.value = pageData.numList;
                loading3.value = false;
            } else {
                options3.value = []
            }
        };
        function selCxAll3(val: any) {
            post({
                url: "/pdm/ProgramNumber/getFieldValue",
                data: val
            }).then(({ data, code }: any) => {
                if (code === 200) {
                    pageData.numList = data;
                } else {
                }
            });
        }


        //下拉框  流程卡号
        const focusSel4 = () => {
            selCxAll4({ "flowCardCode": "" });
        }
        const options4 = ref<any>(pageData.cardList);
        const loading4 = ref(false);
        const handleSearch4 = (value: any) => {
            if (value) {
                const ob = { flowCardCode: value }
                loading4.value = true;
                selCxAll4(ob);
                options4.value = pageData.cardList;
                loading4.value = false;
            } else {
                options4.value = []
            }
        };
        function selCxAll4(val: any) {
            post({
                url: "aps/circulatCard/getDropValue",
                data: val
            }).then(({ data, code }: any) => {
                if (code === 200) {
                    pageData.cardList = data;
                } else {
                }
            });
        }

        //根据流转卡号带出布号和重量
        const cardChange = () => {
            dataForm.greyCode = ""
            dataForm.flowCardWeight = ""
            post({
                url: 'aps/circulatCard/getList',
                data: {
                    flowCardCode: dataForm.flowCardCode
                }
            }).then((res: any) => {
                if (res.code == 200) {
                    dataForm.greyCode = res.data[0].greyCode
                    dataForm.flowCardWeight = res.data[0].flowCardWeight
                }
            })
        }
        //流转卡号带出布号和重量
        const ccFocus = () => {
            if (dataForm.flowCardCode != '') {
                post({
                    url: "/pdm/controlMachine/getList",
                    data: {
                        "flowCardCode": dataForm.flowCardCode,
                    }
                })
                    .then(({ data, code }: any) => {
                        if (code === 200) {
                            pageData.ccList = data
                        }
                    })
            }
        }
        const ccClick = () => {
            if (dataForm.flowCardCode == "") {
                Message.warning('请先选择流转卡号！')
            }
        }

        const formRef: any = ref()
        const ybClick = async () => {
            const err = await formRef.value?.validate()
            if (!err) {
                post({
                    url: "/pdm/BathRatioCount/calculate",
                    data: {
                        flowCardCode: dataForm.flowCardCode,
                        greyCode: dataForm.greyCode,
                        flowCardWeight: dataForm.flowCardWeight,
                        controlMachineCode: dataForm.controlMachineCode,
                        programNumber: dataForm.programNumber
                    }
                }).then(({ data, code }: any) => {
                    dataForm.yb = data
                })
            } else {
                return false
            }
        }
        // //设置权限
        // // ['查询', '新增', '删除', '导出', '导入']
        // const permissionStore = usePermission()

        // if (permissionStore.hasPermisson('ppzl.cx')) {

        //     pageData.btnList.push("查询")
        // }
        // if (permissionStore.hasPermisson('ppzl.xz')) {
        //     pageData.btnList.push("新增")
        // }
        // if (permissionStore.hasPermisson('ppzl.sc')) {
        //     pageData.btnList.push("删除")
        // }
        // if (permissionStore.hasPermisson('ppzl.dc')) {
        //     pageData.btnList.push("导出")
        // }
        // if (permissionStore.hasPermisson('ppzl.dr')) {
        //     pageData.btnList.push("导入")
        // }
        // if (permissionStore.hasPermisson('ppzl.xg')) {
        //     pageData.isEdit = true
        // }
        // console.log(permissionStore.hasPermisson('ppzl.cx'));
        const handleChange = (_data: any) => {
            table.handleSuccess(_data);
        }
        return {
            ybClick,
            ccFocus,
            ccClick,
            cardChange,
            options4,
            loading4,
            handleSearch4,
            focusSel4,
            options3,
            loading3,
            handleSearch3,
            focusSel3,
            options2,
            loading2,
            handleSearch2,
            focusSel2,
            formRef,
            dataForm,
            selectedRowKeys,
            table,
            rowKey,
            pageData,
            queryData,
            options,
            loading,
            handleSearch,
            focusSel,
            options1,
            loading1,
            handleSearch1,
            focusSel1,
            headerShow,
            handleChange
        };
    },
    components: { Toolbar, PageTabelLayout,  }
}
</script>
<style scoped lang="less">
:deep(.ag-cell) {
    border-right: 1px solid #dde2eb;
}

:deep(.ag-header-cell) {
    border-right: 1px solid #dde2eb;
}

:deep(.ag-cell-value) {
    user-select: initial;
    -moz-user-select: text;
    -ms-user-select: text;
    -webkit-user-select: text;
}
</style>